<template>
  <div>
    <a-row type="flex" justify="center" align="top">
      <a-col :span="14">
        <a-input-search
          placeholder="输入电影信息"
          :loading="search"
          enter-button
          size="large"
          @search="onSearch"
        >
          <a-select slot="addonBefore" default-value="Zhejiang">
            <a-select-option value="Zhejiang">电影</a-select-option>
            <a-select-option value="Jiangsu">电视剧</a-select-option>
          </a-select>
        </a-input-search>
      </a-col>
    </a-row>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-form :form="form" layout="inline">
        <h1 style="font-size: 1.5rem;">
          <a-icon type="tags" />&emsp;类别:
        </h1>
        <a-row title="所属类目" block style="padding-bottom: 11px;">
          <a-form-item>
            <a-tag style="font-size: 16px;" v-for="(item) in genres" :key="item">
              <router-link :to="'/search/genres/' + item">{{item}}</router-link>
            </a-tag>
          </a-form-item>
        </a-row>
      </a-form>
    </a-card>
    <!-- 离线推荐 -->
    <a-row style="margin-top: 30px;">
      <h1 style="font-size: 2rem;" id="offline">
        <a-icon type="star" spin />&emsp;离线推荐
      </h1>
    </a-row>
    <a-spin size="large" :spinning="loading">
      <div class="ant-pro-pages-list-projects-cardList">
        <a-list :data-source="WishMovie" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
          <a-list-item slot="renderItem" slot-scope="item">
            <router-link :to="'/movies/mid/' + item.mid">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <img
                  slot="cover"
                  :src="'http://127.0.0.1:8081/images/' + item.mid + '/picture.jpg'"
                  :alt="item.name"
                />
                <a-card-meta :title="item.name">
                  <template slot="description">
                    <p>语言：{{ item.language }} / {{ item.shoot }}</p>
                    <p>导演：{{ item.directors }}</p>
                    <p>时长：{{ item.timelong }}</p>
                    <p>评分：{{ item.score + 5 }}</p>
                  </template>
                </a-card-meta>
                <div class="cardItemContent">
                  <span>{{ item.issue | fromNow }}</span>
                </div>
              </a-card>
            </router-link>
          </a-list-item>
        </a-list>
      </div>
    </a-spin>
    <!-- 大陆电影 -->
    <a-row style="margin-top: 30px;">
      <h1 style="font-size: 2rem;" id="online">
        <a-icon type="thunderbolt" spin />&emsp;大陆电影
      </h1>
    </a-row>
    <a-spin size="large" :spinning="loading">
      <div class="ant-pro-pages-list-projects-cardList">
        <a-list :data-source="dataCN" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
          <a-list-item slot="renderItem" slot-scope="item">
            <router-link :to="'/moviesCN/mid/' + item.mid">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <img
                  slot="cover"
                  src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
                  :alt="item.title"
                />
                <a-card-meta :title="item.name">
                  <template slot="description">
                    <p>语言：{{ item.language }} / {{ item.shoot }}</p>
                    <p>标签: {{ item.genres }}</p>
                    <p>导演：{{ item.directors }}</p>
                    <p>时长：{{ item.timelong }}</p>
                    <p>评分：{{ item.score + 5 }}</p>
                  </template>
                </a-card-meta>
                <div class="cardItemContent">
                  <span>{{ item.updatedAt | fromNow }}</span>
                </div>
              </a-card>
            </router-link>
          </a-list-item>
        </a-list>
      </div>
    </a-spin>

    <!-- 热评榜 -->
    <a-row style="margin-top: 30px;">
      <h1 style="font-size: 2rem;" id="month">
        <a-icon type="trophy" id="RY" />&emsp;热评榜
      </h1>
    </a-row>
    <a-spin size="large" :spinning="loading">
      <div class="ant-pro-pages-list-projects-cardList">
        <a-list :data-source="RateMore" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
          <a-list-item slot="renderItem" slot-scope="item">
            <router-link :to="'/movies/mid/' + item.mid">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <img
                  slot="cover"
                  :src="'http://127.0.0.1:8081/images/' + item.mid + '/picture.jpg'"
                  :alt="item.name"
                />
                <a-card-meta :title="item.name">
                  <template slot="description">
                    <p>语言：{{ item.language }} / {{ item.shoot }}</p>
                    <p>导演：{{ item.directors }}</p>
                    <p>时长：{{ item.timelong }}</p>
                    <p>评分：{{ item.score + 5 }}</p>
                  </template>
                </a-card-meta>
                <div class="cardItemContent">
                  <span>{{ item.issue | fromNow }}</span>
                </div>
              </a-card>
            </router-link>
          </a-list-item>
        </a-list>
      </div>
    </a-spin>

    <a-anchor
      affix
      showInkInFixed
      :offsetTop="80"
      style="position: fixed; right: 10px; top: 100px; width: 150px;"
    >
      <a-anchor-link href="#offline" title="离线推荐" />
      <a-anchor-link href="#online" title="大陆电影推荐" />
      <a-anchor-link href="#month" title="热评榜" />
      <a-anchor-link href="#API" title="API">
        <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
        <a-anchor-link href="#Link-Props" title="Link Props" />
      </a-anchor-link>
    </a-anchor>
  </div>
</template>

<script>
import moment from "moment";
import {
  getRateMoreMovieList,
  getMovieWish,
  getTopGenres,
} from "@/api/MovieRest";
import { cn_getHotMovieList } from "@/api/MovieRestCN";
export default {
  // components: { AvatarList },
  data() {
    return {
      searchValue: "",
      search: false,
      genres: [],
      RateMore: [],
      WishMovie: [],
      dataCN: [],
      form: this.$form.createForm(this),
      loading: true,
    };
  },
  filters: {
    fromNow(date) {
      return moment(date).fromNow();
    },
  },
  created() {
    this.getList();
    this.getWish();
    getTopGenres().then((res) => {
      this.genres = res;
    });

    cn_getHotMovieList({ username: "c", num: 4 }).then((res) => {
      console.log(res);
      this.dataCN = res;
    });
  },
  mounted() {
    // this.getList();
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    getList() {
      getRateMoreMovieList({ num: 4 }).then((res) => {
        this.loading = false;
        this.RateMore = res;
      });
    },
    getWish() {
      getMovieWish({ username: "c", num: 4 }).then((res) => {
        this.loading = false;
        this.WishMovie = res;
      });
    },
    onSearch(value) {
      this.search = !this.search;
      this.$router.push("/search/genres/" + value);
    },
  },
};
</script>

<style lang="less" scoped>
.ant-pro-components-tag-select {
  margin-top: 30px;
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
// .ant-pro-pages-list-projects-cardList {
//   margin-top: 12px;
//   /deep/ .ant-card-meta-title {
//     margin-bottom: 4px;
//   }
//   /deep/ .ant-card-meta-description {
//     height: 44px;
//     overflow: hidden;
//     line-height: 22px;
//   }
//   .cardItemContent {
//     display: flex;
//     // height: 20px;
//     margin-top: 16px;
//     margin-bottom: -4px;
//     line-height: 20px;
//     > span {
//       flex: 1 1;
//       color: rgba(0, 0, 0, 0.45);
//       font-size: 12px;
//     }
//     /deep/ .ant-pro-avatar-list {
//       flex: 0 1 auto;
//     }
//   }
// }

#RY {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 2s linear infinite;
  -moz-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(359deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotateY(0deg);
  }
  to {
    -o-transform: rotateY(359deg);
  }
}
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}

/* .article-list {
  position: relative;
  width: 1100px;
  border: 1px red solid;
  color: black;
} */
</style>
